<!-- 
Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved. 
Licensed under the MIT License.
contact:dcdev_founder@foxmail.com 
-->

<!DOCTYPE html>
<html>

<base class="_dcdev_preset_" href="https://res.dcdev.net/" />

<head>
    <!------ 以下内容不要动 --------------------------------------------------------->
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 数控开发基础样式库（已作一定的自适应，button/label/input/textarea等设置了默认样式） -->
    <link class="_dcdev_preset_" type="text/css" rel="stylesheet"
        href="https://res.dcdev.net/dcdev/v1.0.6/assets/css/dcdevui.css">
    <!-- 页面标题 -->
    <title>数控开发 · 预览代码片段</title> <!-- 桌面端浏览器及收藏夹图标 -->
    <link class="_dcdev_preset_" rel="icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <link class="_dcdev_preset_" rel="shortcut icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <!------ 以上内容不要动 --------------------------------------------------------->


</head>

<body>
    <!------ dcdev_body_container不要删除,内容在 body start 及 body end 中间书写  ------>
    <div class="dcdev-body-container" id="dcdev_body_container" style="display: none;">
        <!-- body start -->

        <div id="table_list" style="width: 100%;background-color: black;"></div>

        <div id="func_list" style="width: 100%;background-color: black;"></div>

        <div id="goods_detail" style="width: 100%; height:300px;background-color: black;"></div>

        <!-- body end -->
    </div>
</body>

<!------ 以下内容不要变动 --------------------------------------------------------->
<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 不授权模式， 仅初始化常用变量及函数 -->
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/init.js" id="initClass"
    authorize_mode="none" console_mode=""></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/ui.js" id="ui_class"
    xhr_show_loading=1></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/func/import_dev_kit.js"></script>
<script class="_dcdev_preset_">
    // 代码片段描述
    code_part_desc = "render_somthing的demo";
    code_part_id = "";
</script>
<!------ 以上内容不要变动 --------------------------------------------------------->

<script>
    $("#table_list").load("http://127.0.0.1:8080/lib/lib_of_front_end/dcdev/v1.0.6/assets/html/render_somthing.html",
        "",
        function () {
            data = {
                id: "table_list",
                type: "table",
                // x表示横向滚动、y表示竖向滚动、block表示块状向下滚动
                direction: "block",
                search_config: {
                    show: false,
                },
                // 每个ul的配置
                ul_config: {
                    ul_class: "",
                    ul_style: "width:33.33%;text-align: center;height:200px;display:flex;align-items: center;padding-left:5px;    padding-right: 5px;border-bottom: 1px solid #ccc; ",
                },
                // 每个li的配置
                li_config: {
                    /*
                        字段变量使用 # 而不是 $ 来定义
                        如需唯一标识某个node，则添加data-key以作区分
                        如需多选，需添加一个固定标签：<div data-key="check_tag"></div>,选中及未选中样式，在check_config中配置
                    */
                    li_class: "li_good_class",
                    li_style: "",
                    li_html: {
                        // 如果不设置条件渲染，则使用默认的html代码渲染
                        default: {
                            html: `
<div>
    <div>
    <img src="#{goods_img}" alt="" style="width: 88px;height: auto;">
    </div>
    <div><p style="color: #ffffff;font-size: 12px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">#{goods_desc}</p></div>
    <div><p style="color: red;">￥#{goods_price}</p></div>
</div>`
                        },
                        /*
                            条件渲染--根据条件决定渲染时使用的html
                            field_value 字段与值作为渲染条件
                            field_field 字段与字段作为渲染条件
                        */
                        // condition条件渲染，bool==1时，我的发言，头像在右边
                        condition: [{
                            expression: "^{ROW_INDEX} % 3 ==1",
                            html: `
<div>
    <div>
    <img src="#{goods_img}" alt="" style="width: 88px;height: auto;">
    </div>
    <div><p style="color: #ffffff;font-size: 16px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">#{goods_desc}</p></div>
    <div><p style="color: red;">￥#{goods_price}</p></div>
</div>`
                        }, ],
                    }
                },
                // 各种类型的回调
                cb_config: {
                    // 点击的回调
                    click: function (res) {},
                    // 获取数据之后的回调,如需提前干预可在此修改html之后返回
                    data_fetched: function (res) {},
                    // 拼接好html代码且渲染前的回调(data为该行的数据，html为准备渲染的html),如需提前干预可在此修改html之后返回
                    before_render: function (res) {},
                    // 所有数据加载完毕的回调
                    no_more: function (res) {},
                },
                // 请求及分页的配置
                data_config: {
                    require: {
                        url: `https://www.dcdev.net/lib/lib_of_back_end/v1.0.1/api/dcdev/system/get_test_data.php`,
                        data: {
                            __RETURN_COLUMNS: "goods_img,goods_desc,goods_price",
                            __PAGE_NUMBER: 1,
                            __PAGE_COUNT: 20,
                            __QUERY_COLUMNS: "",
                            __ORDER: [],
                        },
                        method: "post",
                        dataType: "json",
                        require_data_param: "data",
                        page_number_param: "__PAGE_NUMBER",
                        page_count_param: "__PAGE_COUNT",
                        data_count_param: "__COUNT",
                        search_keyword_param: "__QUERY_COLUMNS",
                        pagination: {
                            enable: false,
                        }
                    },
                },
            };
            new render_class().render(data, null, null)
        });
</script>

<script>
    $("#func_list").load("http://127.0.0.1:8080/lib/lib_of_front_end/dcdev/v1.0.6/assets/html/render_somthing.html",
        "",
        function () {
            data = {
                // 容器div的id
                price: 0,
                id: "func_list",
                // x表示横向滚动、y表示竖向滚动、block表示块状向下滚动
                direction: "y",
                // 多选配置
                check_config: {
                    // 单选 （none/single/multi）,默认none
                    mode: "multi",
                    enable: true,
                    // 选中状态配置
                    on_config: {
                        html: `<a style="color:red;">22</a>`,
                        // 选中回调
                        cb: function (res) {

                        },
                    },
                    // 未选中状态配置
                    off_config: {
                        html: `<a style="color:gray;">11</a>`,
                        // 取消选中回调
                        cb: function (res) {

                        },
                    }
                },
                // 每个ul的配置
                ul_config: {
                    ul_class: "",
                    ul_style: "margin-left: 20px;text-align: center;clear:both;",
                },
                // 每个li的配置
                li_config: {
                    /*
                        字段变量使用 # 而不是 $ 来定义
                        如需唯一标识某个node，则添加data-key以作区分
                        如需多选，需添加一个固定标签：<div data-key="check_tag"></div>,选中及未选中样式，在check_config中配置
                    */
                    li_class: "",
                    li_style: "",
                    li_html: {
                        // 如果不设置条件渲染，则使用默认的html代码渲染
                        default: {
                            html: `
                            <div data-key="check_tag"></div>
<div style=" display: flex;margin-top:10px; ">
    <img data-key=image src="#{img}" style="width:40px;height:40px;">
    <div style="font-size:12px;color:gray;line-height: 50px;margin-left:20px">#{title}</div>
</div>
`
                        },
                        /*
                            条件渲染--根据条件决定渲染时使用的html
                            field_value 字段与值作为渲染条件
                            field_field 字段与字段作为渲染条件
                        */
                        // condition条件渲染，bool==1时，我的发言，头像在右边
                        condition: [{
                            expression: "^{ROW_INDEX} ==1",
                            html: `
<div style=" display: flex;margin-top:10px; margin-bottom:20px;">
    <img data-key=image src="#{img}" style="width:40px;height:40px;">
    <div style="font-size:12px;color:gray;line-height: 50px;margin-left:20px">#{title}</div>
</div><hr>
`
                        }, ],
                    }
                },
                // 各种类型的回调
                cb_config: {
                    // 点击的回调
                    click: function (res) {},
                    // 获取数据之后的回调,如需提前干预可在此修改html之后返回
                    data_fetched: function (res) {},
                    // 拼接好html代码且渲染前的回调(data为该行的数据，html为准备渲染的html),如需提前干预可在此修改html之后返回
                    before_render: function (res) {},
                    // 所有数据加载完毕的回调
                    no_more: function (res) {},
                },
                data_config: {
                    data: [{
                        img: "https://p4.ssl.qhmsg.com/t01e4c126e44c6e0e47.png",
                        title: "朋友圈"
                    }, {
                        img: "https://p1.ssl.qhmsg.com/t015c4a525a2379d9f6.png",
                        title: "视频号"
                    }, {
                        img: "https://p3.ssl.qhimg.com/t015eebd58e3c9362f7.png",
                        title: "扫一扫"
                    }, {
                        img: "https://p2.ssl.qhimg.com/t01dfc013c7b3c21ac3.png",
                        title: "看一看"
                    }, {
                        img: "https://p4.ssl.qhmsg.com/t01e4c126e44c6e0e47.png",
                        title: "搜一搜"
                    }, {
                        img: "https://p4.ssl.qhmsg.com/t01e4c126e44c6e0e47.png",
                        title: "小程序"
                    }, ],
                },
            };
            new render_class().render(data, null, null)
        });
</script>

<script>
    $("#goods_detail").load("http://127.0.0.1:8080/lib/lib_of_front_end/dcdev/v1.0.6/assets/html/render_somthing.html",
        "",
        function () {
            data = {
                // 容器div的id
                price: 0,
                id: "goods_detail",
                // x表示横向滚动、y表示竖向滚动、block表示块状向下滚动
                direction: "block",
                search_config: {
                    show: false,
                },
                // 每个ul的配置
                ul_config: {
                    ul_class: "",
                    ul_style: "width:33.33%;text-align: center;height:200px;display:flex;align-items: center;padding-left:5px;    padding-right: 5px;border-bottom: 1px solid #ccc; ",
                },
                // 每个li的配置
                li_config: {
                    /*
                        字段变量使用 # 而不是 $ 来定义
                        如需唯一标识某个node，则添加data-key以作区分
                        如需多选，需添加一个固定标签：<div data-key="check_tag"></div>,选中及未选中样式，在check_config中配置
                    */
                    li_class: "li_good_class",
                    li_style: "",
                    li_html: {
                        // 如果不设置条件渲染，则使用默认的html代码渲染
                        default: {
                            html: `
<div>
    <div>
    <img src="#{goods_img}" alt="" style="width: 88px;height: auto;">
    </div>
    <div><p style="color: #ffffff;font-size: 12px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">#{goods_desc}</p></div>
    <div><p style="color: red;">￥#{goods_price}</p></div>
</div>`
                        },
                        /*
                            条件渲染--根据条件决定渲染时使用的html
                            field_value 字段与值作为渲染条件
                            field_field 字段与字段作为渲染条件
                        */
                        // condition条件渲染，bool==1时，我的发言，头像在右边
                        condition: [{
                            expression: "^{ROW_INDEX} % 3 ==1",
                            html: `
<div>
    <div>
    <img src="#{goods_img}" alt="" style="width: 88px;height: auto;">
    </div>
    <div><p style="color: #ffffff;font-size: 16px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;">#{goods_desc}</p></div>
    <div><p style="color: red;">￥#{goods_price}</p></div>
</div>`
                        }, ],
                    }
                },
                // 各种类型的回调
                cb_config: {
                    // 点击的回调
                    click: function (res) {},
                    // 获取数据之后的回调,如需提前干预可在此修改html之后返回
                    data_fetched: function (res) {},
                    // 拼接好html代码且渲染前的回调(data为该行的数据，html为准备渲染的html),如需提前干预可在此修改html之后返回
                    before_render: function (res) {},
                    // 所有数据加载完毕的回调
                    no_more: function (res) {},
                },
                // 请求及分页的配置
                data_config: {
                    require: {
                        url: `https://www.dcdev.net/lib/lib_of_back_end/v1.0.1/api/dcdev/system/get_test_data.php`,
                        data: {
                            __RETURN_COLUMNS: "goods_img,goods_desc,goods_price",
                            __PAGE_NUMBER: 1,
                            __PAGE_COUNT: 20,
                            __QUERY_COLUMNS: "",
                            __ORDER: [],
                        },
                        method: "post",
                        dataType: "json",
                        require_data_param: "data",
                        page_number_param: "__PAGE_NUMBER",
                        page_count_param: "__PAGE_COUNT",
                        data_count_param: "__COUNT",
                        search_keyword_param: "__QUERY_COLUMNS",
                        pagination: {
                            enable: false,
                        }
                    },
                },
            };
            new render_class().render(data, null, null)
        });
</script>


</html>